<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/form-elements.css">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/layer.css">
		<title>登录</title>
		<style>
			body {
				background: url("img/bg.jpg") no-repeat fixed;
				background-size: cover;
				overflow: hidden;
			}
			#login_container {
				display: none;
				position: fixed;
				margin: auto;
				height: 300px;
				width: 100%;
				top: -5px;
				right: 0;
				bottom: 0;
				left: -20px;
			}
		</style>
	</head>
	<body>
		<div class="container myBox" id="app">
			<div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-3 form-box">
				<div class="form-top">
					<div class="form-top-left">
						<h3>小标会议平台</h3>
						<p>请输入您的信息:</p>
					</div>
					<div class="form-top-right">
						<i class="fa fa-key"></i>
					</div>
				</div>
				<div style="position: absolute;z-index: 99;width: 100%;">
					<div id="login_container" style="position: relative;"></div>
				</div>
				<div class="form-bottom" style="padding-bottom: 10px;">
					<!--上面的输入框尽可能不需要外边距，使用row解决-->
					<div class="row">
						<div :style="{opacity: showWxCode?0:1}">
							<div class="form-group">
								<input type="text" v-model="username" name="form-username" placeholder="用户名" class="form-username form-control" id="form-username">
							</div>
							<div class="form-group">
								<input type="password" v-model="password" name="form-password" placeholder="密码" class="form-password form-control" id="form-password">
							</div>
							<div class="form-group">
								<input type="text" name="checkCode" v-model="code" placeholder="请输入验证码" style="float: left;width: 260px;" id="form-code" />
								<div style="float: left;height: 50px;width: 25px" ></div>
								<a onclick="document.getElementById('code').src='/generateCode?v='+Math.random()" style="float: left" >
								    <img src="/generateCode" style="width: 100%;height: 100%;" title="看不清点击刷新" id="code"/>
								</a>
								<!-- <a style="float: left" @click="changeCode">
									<img :src="path" title="看不清点击刷新" id="code" />
								</a> -->
								<div style="float: left;height: 50px;width: 20px"></div>
								<div style="height: 50px;line-height: 50px">
									<label>
										<input type="checkbox" v-model="remember">
										<div style="display: inline-block;width: 5px;"></div>
										<p style="display: inline-block;" ondragstart="return false" onselectstart="return false"> 记住我 </p>
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div :style="{opacity: showWxCode?0:1}">
								<button class="btn" id="loginBtn" @click="login" style="width: 100%">登录</button>
							</div>
							<br >
							<div class="row">
								<div style="padding: 10px 25px; position: relative;">
									<div v-if="!showWxCode" style="display: inline-block;float: left" class="text-left"><a href="/forget.html">忘记密码</a></div>
									<div v-if="showWxCode" @click="reLogin" style="display: inline-block;float: left" class="text-left"><a href="javascript:void(0);" style="cursor: pointer;">账号登录</a></div>
									<span style="display: inline-block;position: absolute;width: 66%;margin: auto;text-align: center;">
										<span @click="wxLogin" style="cursor: pointer;" >
											<img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" >&nbsp;&nbsp;&nbsp;微信登录&nbsp;&nbsp;&nbsp;	
										</span>
										<!-- <video  src="" autoplay="autoplay"></video> -->
									</span>
									<div style="display: inline-block;float: right" class="text-right"><a href="/register.html">注册账号 &gt;&gt;</a></div>
								</div>
							</div>
						</div>
					</div>
					<!--上面的输入框尽可能不需要外边距，使用row包裹起来解决-->
				</div>
			</div>
		</div>
		<!-- Javascript -->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="js/jquery.backstretch.min.js"></script>
		<script src="js/scripts.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/vue-2.6.11.js"></script>
		<script src="js/axios-0.19.2.min.js"></script>
		<script src="js/jquery-cookie-1.4.1.js"></script>
		<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var obj = new WxLogin({
				self_redirect:true,
				id:"login_container", 
				appid: "wx993758d491e2eb6e", 
				scope: "snsapi_login", 
				redirect_uri: encodeURIComponent("http://xb.dfbz.com/wx_login"), 
				state: Math.ceil(Math.random()*1000), 
				style: "black",
				href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9"
			});
			
			let vm = new Vue({
				el: '#app',
				data: {
					remember: false,
					username: 'admin',
					password: 'admin',
					code: '',
					path: 'code.png',
					showWxCode: false
				},methods:{
					login(){
						if (this.username.trim() == "") {
							alert("请输入用户名");
						} else if (this.password == "") {
							alert("请输入密码");
						// } else if (this.code.trim() == "") {
						// 	alert("请输入验证码");
						} else {
							axios({
								url: '/user/login',
								params: {
									username: this.username.trim(),
									password: this.password,
									code: this.code.trim(),
									remember: this.remember
								}
							}).then((response) => {
								// 将对象转换成JSON字符串
								layer.msg(response.data.message);
								if (response.data.flag) {
									// 登录成功后 绑定用户登录状态到前端对象，保持登录状态
									let userInfo = response.data.obj;
									// 保存用户名、ID、部门名和头像地址
									document.cookie = "XB=" + userInfo.username + "::" + userInfo.password;
									delete userInfo.password;
									sessionStorage.setItem("loginUser", JSON.stringify(userInfo));
									// console.log(JSON.parse(sessionStorage.getItem("loginUser")));
									setTimeout(function() {
										location.href = "/html/home.html";	// 跳转到主页
									}, 500);
								}
							})
						}
					},
					changeCode() {
						// 添加一个日期，来保证不同请求	
						this.path = 'code.png?' + new Date();
					},
					wxLogin(evnet){
						// location.href = "/to_wxLogin";
						this.showWxCode = true;
						event.stopPropagation();
						event.preventDefault();
						// $("#loginBtn").css('visibility','visible');
						$("#login_container").show();
						// console.log('in')
					},
					reLogin(evnet){
						this.showWxCode = false;
						// event.stopPropagation();
						// event.preventDefault();
						// $("#loginBtn").css('visibility','hidden');
						$("#login_container").hide();
						// console.log('out')
					}
				}
			})
		</script>
	</body>
</html>
